<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box-big{
          width: 100%;
          background-color: green;
          height: 200px;
          display: flex;
          align-items: center;
        }
    
        .box-small{
          width: 200px;
          height: 100px;
          background: url(https://oss.9ihub.com/test/20231018212339.png);
          animation: bear-play 1s steps(8) infinite,bear-run 8s linear infinite;
        }
    
        @keyframes bear-play{
          0%{
            background-position: 0px 0px;
          }
          100%{
            background-position: -1600px 0px;
          }
        }
    
        @keyframes bear-run {
          0%{
            transform: translateX(0px);
          }
          100%{
            transform: translateX(1440px);
          }
        }
      </style>
    </head>
    <body>
      <div class="box-big">
        <div class="box-small"></div>
      </div>
    </body>
</html>
